<!--
 * @Author: 梁青春
 * @Date: 2025-02-24 09:47:10
 * @LastEditTime: 2025-02-24 10:27:20
 * @LastEditors: 梁青春
-->
<template>
  <div :id="mapId" ref="geomap" style="width: 100%; height: 100%" />
</template>

<script setup>
import { ref, defineProps, defineEmits, getCurrentInstance, onMounted } from 'vue'
import { init } from './map.js'
// plugin's classes should be imported directly like
import { getDicts as getDicts } from '@/api/system/config'

const { proxy } = getCurrentInstance()

const props = defineProps({
  // 传入
  mapId: {
    type: [String, Number],
    default: () => {
      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      const maxLength = chars.length
      let str = ''
      let i = 0
      do {
        str = str + chars.charAt(Math.floor(Math.random() * maxLength))
        i++
      } while (i < maxLength)
      return str
    }
  },
  // 地图类型： cobalt 暗夜模式，  hybrid 影像图， lightColor 地形
  mapType: {
    type: [String],
    default: 'cobalt'
  },
  // 地图倾斜角度
  pitch: {
    type: [String, Number],
    default: 68
  },
  extent: {
    type: Array
  }
})
const emit = defineEmits(['completed'])
let MAP = null
let center = [116.397455, 39.909187]
const geomap = ref()
onMounted(() => {
  proxy.getConfigKey('sys.map.center.pos').then(response => {
    if (response.msg) {
      center = response.msg.split(',')
    }
    initMap()
  })
})

const getZoomOption = () => {
  return new Promise((resolve, reject) => {
    getDicts('sys_map_type_zoom').then(res => {
      resolve(res.data)
    })
  })
}

const initMap = async () => {
  const zoomArray = await getZoomOption()
  const zooms = zoomArray.filter(item => item.dictLabel === props.mapType)[0].dictValue.split('-')

  MAP = init(geomap.value, {
    center,
    zooms,
    style: props.mapType,
    extent: props.extent,
    pitch: props.pitch
  })
  emit('completed', MAP)
}
</script>
